<template>
  <mt-popup v-if="!remove" v-model="show" position="bottom" class="w100">
    <div class="picker-title flex">
      <span class="flex-1"></span>
      <span class="title flex-4 tac wsnw">{{title}}</span>
      <span class="sure flex-1 tac" @click="sure">确定</span>
    </div>
    <mt-picker ref="picker" :value-key="valueKey" :slots="slots" @change="onValuesChange"></mt-picker>
  </mt-popup>
</template>

<script>
  export default {
    props: {
      options: {
        // 备选列表，多列时为二维数组
        type: Array,
        default() {
          return [];
        }
      },
      divider: {
        // 分隔符，为空字符时无分隔符
        type: String,
        default: "-"
      },
      title: {
        // 选择picker的标题和页面上显示的默认文字
        type: String,
        default: "请选择"
      },
      valueKey: {
        // 选项为对象时显示的字段名称
        type: String,
        default: "name"
      },
      value: {
        // 打开选择器时的默认选中的值，数组长度必须和options的长度一样，options是一维数组时长度为1
        type: Array,
        default() {
          return [];
        }
      }
    },
    watch: {
      show(val) {
        !val && setTimeout(() => (this.remove = true), 300);
        !val && this.close();
      },
      options() {
        this.showPicker();
      }
    },
    data() {
      return {
        show: true,
        res: [],
        slots: [],
        remove: false,
        firstIn: true,
        oldRes: []
      };
    },
    created() {
    },
    methods: {
      showPicker() {
        this.slots = [];
        if (this.options.length) {
          if (Array.isArray(this.options[0])) {
            // 二维数组
            this.options.map((e, i) => {
              if (this.slots.length && this.divider) {
                this.slots.push({
                  divider: true,
                  content: this.divider
                });
              }
              this.slots.push({
                flex: 1,
                values: e
              });
            });
          } else {
            // 一维数组
            this.slots.push({
              flex: 1,
              values: this.options
            });
          }
        }
        this.show = true;
        if (this.value && this.value.length && this.firstIn) {
          this.firstIn = false;
          this.value.map((e, i) => {
            setTimeout(() => {
              this.$refs.picker.setSlotValue(i, e);
            }, 0);
          });
        }
      },
      sure() {
        this.$emit("sure", this.$refs.picker.getValues(), this.close);
      },
      close() {
        this.show = false;
        this.$emit('close')
      },
      onValuesChange(e) {
        this.res = e.getValues();
        let i = 0;

        for (let k in this.res) {
          // 记录当前改变的列
          this.res.splice(k, 1, e.getSlotValue(k * 1));
          if (this.res[k] && this.res[k] !== this.oldRes[k] && i === 0) {
            i = k;
            // break;
          }
        }

        // 选择改变时回调
        this.oldRes = [...this.res];
        this.$emit("change", this.oldRes, i * 1, e);
      }
    }
  };
</script>

<style scoped lang="less">
  .picker-title {
    line-height: 70px;
    font-size: 26px;
    color: #666;
    border-bottom: 2px #f6f7f9 solid;
    .sure {
      color: #14c8ff;
      font-size: 30px;
    }
  }
</style>